<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<style type="text/css">
.link {
  color:#000;
  text-decoration:none;
}

.link2 {
  color:#000;
}


.link:hover {
    text-decoration:underline
}
</style>
<script src="waiter-min.js"></script>
<link type="text/css" rel="stylesheet" href="assets/SyntaxHighlighter.css"></link>
<script language="javascript" src="assets/shCore.js"></script>
<script language="javascript" src="assets/shBrushJScript.js"></script>
<script>
window.onload = function() {
   window.spinner.start({uuid : 'spinner', 
                                 minWith : 5,
                                 minHeight : 5,
                                 delay :25,
                                 increment : 3,
                                 maxWidth : 10,
                                 maxHeight : 10,
                                 xRadius : 40,
                                 yRadius : 12,
                                 count : 9,
                                 centerX : 55,
                                 centerY : 25
                                 });
}
</script>

</head>
<body>

<div>
 <div style="float:left;width:300px;height:60px;">
  <div style="font-size:32px">Ajax Waiter</div>
  <div>Waiting has never been so fun!</div>
 </div>
 <div id="spinner" style="position: relative; float:left;width:60px;height:60px"></div>
</div>
<div style="clear:both;float:right"><a href="tests.html" class="link">Tests</a> | <a href="http://gregmurray.org/waiter/" class="link">Home</a></div>
<div style="clear:right;height:3px;background:#9C9;border-bottom:1px solid #000"></div>

<p style="clear:both">
Ajax Waiter is a small JavaScript libary for providing wait overlays with a CSS based spinners. Ajax Waiter can be used with any existing libraries. The Ajax Waiter is fully configurable using basic properties. No expertise in JavaScript is needed.
</p>

<p style="clear:both;font-size:20px">Usage</p>
<div id="codeSample" style="height:200px; width:100%">

<pre name="code" style="width:300px" class="javascript">
&lt;script src="waiter.js"&gt;&lt;/script&gt;
&lt;script&gt;
 // Show the waiter
 window.waiter.show({ targetId : 'codeSample'});

 // Update the message
 window.waiter.setMessage({ targetId : 'codeSample', message : 'Wait for me!'});

 // Hide the waiter
 window.waiter.hide({ targetId : 'codeSample'});
&lt;/script&gt;
</pre>


</div>

<p>
Test it now : <a href="javascript:window.waiter.show({ targetId : 'codeSample'})">Show</a> |
          <a href="javascript:window.waiter.setMessage({ targetId : 'codeSample', message : 'Wait for me!'})">Update Message</a> |
          <a href="javascript:window.waiter.hide({ targetId : 'codeSample'})">Hide</a>
</p>

<p style="clear:both;font-size:20px">Downloads</p>

<p>Waiter requires a single script to use. No other resources or images are needed.</p>

<p><a href="waiter.js">Full</a> - Full 1.0 version of waiter (13kb).</p>
<p><a href="waiter-min.js">Compact</a> - Compact 1.0 version of waiter (4kb).</p>

<p style="clear:both;font-size:20px">Source</p>

<p>Waiter is an open source project under an MIT style license. If you would like to contribute please visit the <a href="http://code.google.com/p/ajax-waiter/">Google Code Project</a>.</p>

<p style="clear:both;font-size:20px">Properties</p>

<p><a href="options.html">Options</a> - Find out more about the properties used configure the waiter component.</p>

<p style="clear:both;font-size:20px">Examples / Tests</p>
<p><a href="tests.html">Tests</a> - See more examples and uses of the waiter component.</p>

<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'asstets/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>